<template>
	<view class="waterfall-item-container" :class="isPc ? 'waterfall-item-container-pc' : ''">
		<view class="waterfall-item" @tap="onTap(params)">
			<view class="waterfall-item-img" :class="isPc ? 'waterfall-item-img-pc' : ''">
				<image class="waterfall-item-image" :src="params.url + '?x-image-process=image/resize,w_300,limit_0'" mode="widthFix" @click="imgClick(params)" @load="emitHeight" @error="emitHeight"></image>
				<view class="waterfall-item-checkstate" v-if="params.fatiecheckState == 1">
					<image class="img" src="https://obs-gociif.ciif-expo.com/web/static/images/checking.png" mode=""></image>
					<text>审核中</text>
				</view>
				<view class="waterfall-item-checkstate" v-if="params.fatiecheckState == 3">
					<image class="img" src="https://obs-gociif.ciif-expo.com/web/static/images/checklose.png" mode=""></image>
					<text style="color: #E50026">审核失败</text>
					<view class="btn" @click.stop="repeatFaTie(params)">
						重新发帖
					</view>
				</view>
				<image v-if="params.type == 2" class="img3" style="pointer-events: none;" src="https://obs-gociif.ciif-expo.com/web/static/images/paiy-list.png" mode="heightFix" @click.stop="likeClick(params)"></image>
			</view>
			<view class="content" v-if="!params.noContent">
				<view class="content-title">{{params.title}}</view>
				<view class="content-bottom">
					<view class="img1 visible-big-img" v-if="params.img" @click.stop="subImgClick(params)" :style="{ 'background-image': `url(${ params.img })` }">
						<image class="rights-icon" :src="params.rightsIconUrl" mode=""></image>
					</view>
					<!-- <image class="img1" v-if="params.img" :src="params.img" @click="subImgClick(params)" mode="aspectFit"></image> -->
					<text class="text ellipsis1 nick" v-if="params.nick">{{ params.nick }}</text>
					<image class="img2 visible-big-img" src="https://obs-gociif.ciif-expo.com/web/static/images/delete-icon.png" v-if="params.isDelete" @click.stop="deleteItem(params)" mode="heightFix"></image>
					<image class="img2 visible-big-img" src="https://obs-gociif.ciif-expo.com/web/static/images/zan.png" v-if="params.isDianzan" @click.stop="deleteItem(params)" mode="heightFix"></image>
					<image class="img2 visible-big-img" src="https://obs-gociif.ciif-expo.com/web/static/images/like-active.png" v-if="!params.isDelete && !params.isDianzan && params.isLike" mode="heightFix" @click.stop="likeClick(params)"></image>
					<image class="img2 visible-big-img" src="https://obs-gociif.ciif-expo.com/web/static/images/like.png" v-if="!params.isDelete && !params.isDianzan && !params.isLike" mode="heightFix" @click.stop="likeClick(params)"></image>
					<text class="text" v-if="params.like || params.like === 0">{{ params.like }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"helangWaterfallItem",
		options:{
			virtualHost: true
		},
		props:{
			paramsObj:{
				type: Object,
				default(){
					return {}
				}
			},
			tag:{
				type:String | Number,
				default:''
			},
			index:{
				type:Number,
				default:-1
			}
		},
		data() {
			return {
				params: {}
			};
		},
		watch: {
			paramsObj: {
				handler(v) {
					if (v) {
						const obj = JSON.parse(JSON.stringify(v))
						obj.height = 0
						this.params = obj
					}
				},
				deep: true,
				immediate: true
			}
		},
		methods:{
			// 发出组件高度信息，在此处可以区分正确和错误的加载，给予错误的提示图片
			emitHeight(e){
				const query = uni.createSelectorQuery().in(this);
				query.select('.waterfall-item-img').boundingClientRect(data => {
					let height = Math.floor(data.height);
					// if (data.width / data.height < 9 / 16) {
					// 	height = Math.floor(data.width * 16 / 9)
					// }
					// this.params.height = height
					// this.$emit("height",this.params.height,this.$props.tag);
					this.$emit("height",height,this.$props.tag)
				}).exec();
			},
			onTap(params){
				this.$emit("click", params);
			},
			deleteItem(params) {
				this.$emit("deleteItem", params);
			},
			repeatFaTie(params) {
				this.$emit("repeatFaTie", params);
			},
			imgClick(params) {
				this.$emit("imgClick", params);
			},
			subImgClick(params) {
				this.$emit("subImgClick", params);
			},
			likeClick(params) {
				this.$emit("likeClick", params);	
			},
		}
	}
</script>

<style lang="scss" scoped>
.waterfall-item{
	background-color: #fff;
	border-radius: 12rpx;
	overflow: hidden;
	font-size: 28rpx;
	color: #666;
	cursor: pointer;
	
	.waterfall-item-image-wrapper {
		overflow: hidden;
	}
	
	.waterfall-item-img {
		position: relative;
		max-height: 622rpx;
		overflow: hidden;
			
		.img3 {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 80rpx;
			height: 80rpx;
		}
		
		.waterfall-item-checkstate {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.6);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			
			.img {
				width: 52rpx;
				height: 52rpx;
			}
			
			text {
				margin-top: 12rpx;
				font-family: AlibabaPuHuiTi_3_55_Regular;
				font-size: 28rpx;
				color: #FF5500;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
			}
			
			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 20rpx;
				width: 168rpx;
				height: 54rpx;
				background: #003FE4;
				border-radius: 27rpx;
				font-family: AlibabaPuHuiTi_3_65_Medium;
				font-size: 26rpx;
				color: #FFFFFF;
				line-height: 26rpx;
				text-align: left;
				font-style: normal;
			}
		}
		
		&.waterfall-item-img-pc {
			border-radius: 12px;
		}
	}
	
	image{
		display: block;
		width: 100%;
		// 默认设置一个图片的大约值
		height: 350rpx;
	}
	
	.content{
		padding: 16rpx 16rpx 20rpx 16rpx;
		
		.content-title {
			font-family: AlibabaPuHuiTi_3_75_SemiBold;
			font-size: 26rpx;
			color: #0A0F1A;
			line-height: 36rpx;
			text-align: left;
			font-style: normal;
		}
		
		.content-bottom {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			
			.img1 {
				height: 36rpx;
				width: 36rpx;
				border-radius: 50%;
				background-repeat: no-repeat;
				background-position: center center;
				background-size: cover;
				position: relative;
				
				.rights-icon {
					width: 24rpx;
					height: 24rpx;
					position: absolute;
					right: -10rpx;
					bottom: -4rpx;
				}
			}
			
			.img2 {
				width: 28rpx;
				height: 28rpx;
			}
			
			.nick {
				flex: 1;
				margin-right: 20rpx;
			}
			
			.text {
				font-family: AlibabaPuHuiTi_3_55_Regular;
				font-size: 22rpx;
				color: #8A8E99;
				line-height: 26rpx;
				text-align: left;
				font-style: normal;
				margin-left: 8rpx;
			}
		}
		
		.money{
			color: #fa3534;
			margin-top: 8rpx;
		}
		
		.label{
			background-color: #fa3534;
			color: #fff;
			font-size: 20rpx;
			padding: 4rpx 16rpx;
			border-radius: 20rpx;
		}
		
		.shop-name{
			font-size: 20rpx;
			color: #999;
		}
	}
}

.waterfall-item-container-pc {
	.content {
		padding: 5px 12px 26px;
		
		.content-title {
			font-size: 14px;
			line-height: 20px;
		}
		
		.content-bottom {
			margin-top: 7px;
			
			.img1 {
				width: 20px;
				height: 20px;
				border: 1px solid #EDEEF0;
			}
			
			.img2 {
				width: 14px;
				height: 14px;
			}
			
			.text {
				font-size: 12px;
				margin-left: 6px;
			}
		}
	}
}
</style>
